<!DOCTYPE html>

<html lang="en" ng-app="appname">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
    <link href='https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic|Montserrat:400,700' rel='stylesheet' type='text/css'>
    <title>Pendar Yousefi: Demographics</title>
    <meta name="description" content="Pendar Yousefi's work on Project Compass" />
    <meta name="author" content="pendar@google.com (Pendar Yousefi)" />
    <link rel="stylesheet" href="/css/style.css"/>
    <script src="/lib/jquery/jquery-2.0.3.js"></script>
    <script src="/lib/angular/angular-1.0.8.min.js"></script>
    <script src="/lib/js-yaml/js-yaml.js"></script>
    <script src="/lib/markdown/markdown.js"></script>
    <script src="/app/main.js"></script>
    <script src="/js/WallopSlider.js"></script>
  </head>
  <body class="demo">
    <header id="header">
      <nav>
        <a class="logo" href="/">
          Pendar Yousefi
        </a>
        
        <ul class="social">
          <li><a class="twitter" href="http://www.twitter.com/legofish" target="_blank"><span class="symbol">&#xe086;</span></a></li>
          <li><a class="dribbble" href="http://www.dribbble.com/legofish" target="_blank"><span class="symbol">&#xe021;</span></a></li>
          <li><a class="linkedin" href="https://www.linkedin.com/pub/pendar-yousefi/b/315/46a" target="_blank"><span class="symbol">&#xe052;</span></a></li>
        </ul>
      </nav>
    </header>
    <section id="content">
      <section id="project-details" class="demo">
        <header>
          <h6>Redesigning demographics</h6>
          <h2>What if display advertisers had better demographic insights?</h2>
          <br/>

          <div class="credits cf">
            <ul class="team">
              <li><strong>UX Lead:</strong> Pendar Yousefi</li>
              <li><strong>PM:</strong> Roy Baharev</li>
              <li><strong>TL:</strong> Bernard Yen</li>
              <li><strong>UER:</strong> Corinne Longmann </li>
              <li><strong>ED:</strong> Zoe Emmanuel</li>
            </ul>
            <div class="meta">
              <span class="size l"><strong>  Size:</strong> L <em class="bars"><i></i><i></i><i></i><i></i></em></span>
              <span class="impact xl"><strong> Impact:</strong> Critical <em class="bars"><i></i><i></i><i></i><i></i></em></span>
            </div>
          </div>
          <div class="links">
            <a href="https://folio.googleplex.com/awux/adwords/targeting/display/demographics/_archive" target="_blank"><img src="/img/icon_design.svg"> Design <br/> archives </a>
            <a href="https://folio.googleplex.com/awux/adwords/targeting/display/demographics/latest#%2F0_0.html" target="_blank"><img src="/img/icon_presentation.svg"> UX Review  </a>
            <a href="http://go/demo-proto" target="_blank"><img src="/img/icon_code.svg"> Protoytpe </a>
            <a href="https://docs.google.com/a/google.com/document/d/1p9LRcPikDDFcaEKg-zsrnqcOEKW9rhTRbaG5kvtSd8c/edit" target="_blank"><img src="/img/icon_doc.svg"> PRD</a>
            
            
          </div>
        </header>
        <article class="value">
          <hgroup>
          <span class="underlay">:)</span>
            <h6>Motivation</h6>
            <p class="lead"> Previously, demographic data was only available for singular dimensions (e.g. females), making it impossible for advertisers to evaluate their cross-dimensional performance (e.g. female parents aged 25-34). This is particularly problematic to Brand advertisers, which is a major focus area for Google.
          </hgroup>
        </article>
        <article class="value">
          <h6>my role</h6>
          <h2> A new mode</h2>
          <p class="colz-2"> I created and designed a new reporting ‘mode’ that for the first time allows AdWords advertisers to view data across multiple demographics dimensions, giving them powerful new insights into who they reach and what demographic segments perform best.</p>
        </article>
        <article class="process right cf">
          <hgroup>
            <h6>Process</h6>
            <h3> On-boarding </h3>
            <p> I inherited the project from another designer who had already produced some designs. At the same time, the project PM had also changed. The previous designs had been through a usability test and did not perform well. In this atmosphere of transition and uncertainty, I proposed a new design direction, and <a href="https://folio.googleplex.com/awux/adwords/targeting/display/demographics/_archive/v2#%2F0_1.png" target="_blank" class="simple">created a presentation </a> to help the new PM understand the problem space. This was used as the foundation to write the <a href="https://docs.google.com/a/google.com/document/d/1p9LRcPikDDFcaEKg-zsrnqcOEKW9rhTRbaG5kvtSd8c/edit" target="_blank" class="simple">PRD</a>. </p>
           
          </hgroup>
          <img src="/img/demo/bg.png">
        </article>
        <article class="process left cf" style="padding-bottom:200px;">
          <hgroup>
          <h6>Process</h6>
          <h3> A new view</h3>
          <p> For the designs, I leveraged my existing knowledge of card-based UIs to introduce a card-based visualization to the page. In addition, I created an easy-to-use switch that instantly allows advertisers to view cross-dimensional stats. I made use of subtle animations, something that was not often used in AdWord. To explain the new features, I created a prototype with a built-in walk-through which explained all the new features to internal stakeholders.<br>
            <a class="simple" href="http://go/demo-proto">Final html prototype</a>
          </p>
          </hgroup>

          <div class="wallop-slider wallop-slider--fade">
            <ul class="wallop-slider__list">
              <li class="wallop-slider__item wallop-slider__item--current">
                <div class="img-wrapper">
                  <img src="/img/demo/animation.gif">
                </div>
               
              </li>
              
            </ul>
           
          </div>

        </article>
        <article class="process middle cf">
          <hgroup>
            <h6>Beyond this project</h6>
            <h3> A product-wide spec</h3>
            <p> I produced a standard visualization spec for depicting demographic data that is now being used by all teams like <a href="https://folio.googleplex.com/awv/targeting/02_target-tab/mocks/r08/target-tab#%2Ftargettab_r8_19.png%3Fz=width" target="_blank" class="simple">AdWords for video </a></p>

          </hgroup>
          <img style="margin-top:50px; border-radius:10px;" src="/img/demo/colors.png" >
        </article>
        <article class="process middle">
          <hgroup>
            <h6>Post-launch</h6>
            <h3> User feedback </h3>
            <p> Less than 48 hours after a 5% launch, this new feature was picked up by the <a href="wordstream.com/blog/ws/2014/10/06/new-adwords-demographics-targeting">Wordstream</a> blog</a>, and received this response from a real user:

          </hgroup>
          <div class="quotes cf">
            <div class="flex"><p>
              "One of my clients already had a huge win with this feature. They do retirement planning - and previously we saw people were most likely to begin converting as they turned of a certain age. With this feature though, we saw that women began to plan for retirement earlier in life and men at an older age. We were able to use that insight to cater our bids and targeting to focus on those specific demos! Very exciting stuff."</p>
          </div>
        </article>
       
        <article class="process">
          <a class="btn" href="http://go/demo-proto" target="_blank">
            See live prototype 
          </a>
        </article>

      </section>
    </section>
   <div class="wrapper">
   </div>
  </body>
  
  <script>
  $(document).ready(function(){

   
    var slider = new WallopSlider('.wallop-slider');

    var months = monthDiff(
        new Date(2013, 07, 29), // November 4th, 2008
        new Date()  // March 12th, 2010
    );
    console.log( months);
  });

  function monthDiff(d1, d2) {
    var months;
    months = (d2.getFullYear() - d1.getFullYear()) * 12;
    months -= d1.getMonth() + 1;
    months += d2.getMonth();
    return months <= 0 ? 0 : months;
}
  </script>
</html>
